import React from 'react';
import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));

// const li1 = React.createElement('li', null, '香蕉')
// const li2 = React.createElement('li', null, '橘子')
// const li3 = React.createElement('li', null, '苹果')
// const ul = React.createElement('ul', {class:'list'}, li1, li2, li3)
// const num = 123
// const obj = {name: '周艳强', age: 22} 
// const car = ['法拉利', '宝马', '奥迪']


// const ul = <ul>
//   <li>{num * 10}</li>
//   <li>姓名: {obj.name} 年龄: {obj.age}</li>
//   <li> 是否允许进入：{obj.age >= 18 ? '是' : '否'}</li>
//   <li>座驾: {car[0]}</li>
//   <li></li>
//   <li></li>
//   <li></li>
// </ul>

// const loadData = (isLoding) => {
//   if (isLoding) {
//     return <h2>加载完成</h2>
//   } else {
//     return <h2>加载中...</h2>
//   }
// }

// const six = (
//   <div>
//   <div>{loadData(true)}</div>
//   <div>{true ? <h2>加载完成</h2> : <h2>加载中...</h2>}</div>
//   <div>{true && <h2>加载中...</h2>}</div>
//   </div>
// )

// const list = [
//   {id: 1, name: '哈喽', age: 20},
//   {id: 2, name: '你好', age: 21},
//   {id: 3, name: '哈哈', age: 22}
// ]

// const readList = () => {
//   const newList = []
//   list.forEach(item => {
//   newList.push(<li key={item.id}>姓名: {item.name} , 年龄: {item.age}</li>)
// })
//   return newList
// }

// const six = (
//   <div>{readList()}</div>
// )

const list = [
  { id: 1, name: '黑马86期', salary: 11000 },
  { id: 2, name: '黑马87期', salary: 12000 },
  { id: 3, name: '黑马88期', salary: 18000 }
]

const newList = (
  <ul>
    {list.map(item => 
     <li key={item.id}>
       <h3>{item.name}</h3>
       <p>{item.salary}</p>
     </li>
    )}
  </ul>
)
root.render(
  newList
);


